<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <ui:composition template="/plantillas/plantillaPrincipal.xhtml">
        <ui:define name="contenido">
            <f:view>
                <h:form>
                    <h:panelGrid columns="1" style="width: 650px;margin: 0px auto;">
                        <p:commandButton id="btnNuevaOrdenServicio" action="#{MBOrdenServicio.nuevo()}" value="AGREGAR ORDEN SERVICIO" ajax="false"/>
                    </h:panelGrid> 
                </h:form>
                <h:form>
                    <p:panel id="pnlBusquedaOrdenServicio" header="Consultar Orden Servicio" style="width: 650px;margin: 0 auto;" 
                             toggleable="true" widgetVar="buscar" collapsed="#{BKOrdenServicio.listaOrdenCompraServiciosActivas ne null}">

                        <p:panelGrid>
                            <p:row>
                                <p:column>
                                    <h:outputText value="PROVEEDOR: " class="lblBusqueda"/>
                                </p:column>
                                <p:column colspan="3">
                                    <p:inputText onkeyup="cambiarMayuscula(this)" id="txtRazonSocialBusqueda" style="width: 100%"
                                                 value="#{BKOrdenServicio.ordenCSBusqueda.idProveedor.razonSocial}" /> 
                                </p:column>
                            </p:row>

                            <p:row>
                                <p:column>
                                    <h:outputLabel id="lblPedido" value="CODIGO OP: " class="lblBusqueda" />
                                </p:column>
                                <p:column>
                                    <p:selectOneMenu id="cbxOrdenPedido" 
                                                     value="#{BKOrdenServicio.ordenPedidoBusqueda.id}"
                                                     style="width: 100%" filter="#{BKOrdenServicio.listaOrdenesPedido.size() gt 10}" 
                                                     filterMatchMode="contains"> 
                                        <f:selectItem itemLabel="Seleccionar" itemValue="-1" /> 
                                        <f:selectItem itemLabel="Sin OP" itemValue="0" /> 
                                        <f:selectItems value="#{BKOrdenServicio.listaOrdenesPedido}" var="ordenP" 
                                                       itemLabel="#{ordenP.codigoOrdenPedido}" itemValue="#{ordenP.id}" />	
                                    </p:selectOneMenu>
                                </p:column>
                                <p:column>
                                    <h:outputLabel id="lblCodigoOrden" value="CODIGO OS: " class="lblBusqueda" />

                                </p:column>
                                <p:column>
                                    <p:inputText onkeyup="cambiarMayuscula(this)" value="#{BKOrdenServicio.ordenCSBusqueda.codigo}" style="width: 190px" />
                                </p:column>
                            </p:row>


                            <p:row>
                                <p:column>
                                    <h:outputText value="SERVICIO " class="lblBusqueda"  />
                                </p:column>
                                <p:column>
                                    <p:inputText onkeyup="cambiarMayuscula(this)" style="width: 200px" value="#{BKOrdenServicio.ordenCSBusqueda.servicio}"  />
                                </p:column>
                                <p:column>
                                    <h:outputText value="ESTADO: " class="lblBusqueda" />
                                </p:column>
                                <p:column>
                                    <p:selectOneMenu value="#{BKOrdenServicio.ordenCSBusqueda.estadoOrden}" style="width: 200px">   
                                        <f:selectItem itemLabel="Seleccione" itemValue=""/> 
                                        <f:selectItem itemLabel="BORRADOR" itemValue="B" />  
                                        <f:selectItem itemLabel="ABIERTO" itemValue="A" />  
                                        <f:selectItem itemLabel="CERRADO" itemValue="C" />  
                                        <f:selectItem itemLabel="ANULADO" itemValue="N" />  
                                    </p:selectOneMenu>  
                                </p:column>
                            </p:row>
                            
                            <p:row>
                                <p:column>
                                    <h:outputText value="ARTICULO: " class="lblBusqueda"/>

                                </p:column>
                                <p:column colspan="3">
                                    <p:inputText onkeyup="cambiarMayuscula(this)" style="width: 100%" value="#{BKOrdenServicio.ordenCSBusqueda.descripcion}" />  
                                </p:column>
                            </p:row>


                            <p:row>
                                <p:column>
                                    <h:outputLabel id="lblFechaInicio" value="DEL: " class="lblBusqueda"/>
                                </p:column>
                                <p:column>
                                    <p:calendar id="txtFechaInicio" locale="es" size="21"
                                                value="#{BKOrdenServicio.fechaInicio}" 
                                                pattern="dd/MM/yyyy" 
                                                maxdate="#{BKOrdenServicio.fechaFinal}"
                                                showOn="button" showButtonPanel="true" navigator="true">
                                        <p:ajax event="dateSelect" process="@this" update="txtFechaFinal"/>
                                    </p:calendar>
                                </p:column>
                                <p:column>
                                    <h:outputLabel id="lblFechaFinal" value="AL: " class="lblBusqueda"/>
                                </p:column>
                                <p:column>
                                    <p:calendar id="txtFechaFinal" locale="es" size="21"
                                                value="#{BKOrdenServicio.fechaFinal}" 
                                                pattern="dd/MM/yyyy"
                                                mindate="#{BKOrdenServicio.fechaInicio}"
                                                showOn="button" showButtonPanel="true" navigator="true">
                                        <p:ajax event="dateSelect" process="@this" update="txtFechaInicio"/>
                                    </p:calendar>
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column>
                                    <p:commandButton id="btnBuscarOrdenServicio" value="BUSCAR" update="btnBuscarOrdenServicio,dataTablaOrdenesServicio"  
                                                     oncomplete="listaOrdenesServicio.show();buscar.toggle()" style="font-size: 12px" styleClass="ui-priority-primary"
                                                     actionListener="#{MBOrdenServicio.buscarListaOrdenServicios}" />
                                </p:column>
                            </p:row>

                        </p:panelGrid>

                    </p:panel>
                    <p:panel id="pnlListaCuentas" header="Lista de Ordenes de Servicio" closable="true" style="width: 100%;margin: 10px auto" 
                             visible="#{(BKOrdenServicio.listaOrdenCompraServiciosActivas eq null)?false:true}" widgetVar="listaOrdenesServicio" >
                        <p:dataTable id="dataTablaOrdenesServicio" var="ordenServicio" widgetVar="carsTable"
                                     value="#{BKOrdenServicio.listaOrdenCompraServiciosActivas}" 
                                     emptyMessage="No se encontraron ordenes de Servicio" filteredValue="" rowIndexVar="rowIndex"
                                     paginator="true" rows="20" paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} 
                                     {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" rowsPerPageTemplate="20,40,60"
                                     rowStyleClass="#{BKOrdenServicio.hoy > ordenServicio.plazoEntrega
                                                      and ordenServicio.estadoOrden eq 'En Proceso'?'vencido':null}"
                                     scrollable="true" scrollHeight="250" style="width:100%" paginatorPosition="bottom" styleClass="datable-busqueda"> 
                            <f:facet name="header" >
                                <p:outputPanel layout="block" >
                                    <h:commandButton value="Exportar EXCEL">  
                                        <p:dataExporter type="xls" target="dataTablaOrdenesServicio" fileName="clientes" />  
                                    </h:commandButton>  

                                    <h:commandButton value="Exportar PDF">  
                                        <p:dataExporter type="pdf" target="dataTablaOrdenesServicio" fileName="clientes"/>  
                                    </h:commandButton>
                                </p:outputPanel>

                            </f:facet>
                            <p:column id="idColumnaNum" headerText="Num." style="width: 4%"> 
                                <h:outputText value="#{rowIndex+1}" /> 
                            </p:column>

                            <p:column id="idColumnaCodigoOrdenPedido" style="width: 11%"
                                      sortBy="#{ordenServicio.idOrdenPedido.codigoOrdenPedido}"
                                      headerText="Codigo OP"  > 
                                <f:facet name="header">  
                                    <h:outputText value="Codigo OP" />  
                                </f:facet>
                                <h:outputText value="#{ordenServicio.idOrdenPedido.codigoOrdenPedido}" /> 
                            </p:column>

                            <p:column id="idColumnaCodigoOrdenServicio" style="width: 10%"
                                      sortBy="#{ordenServicio.codigo}" > 
                                <f:facet name="header">  
                                    <h:outputText value="Codigo OS" />  
                                </f:facet>
                                <h:outputText value="#{ordenServicio.codigo}" /> 
                            </p:column>

                            <p:column id="idColumnaProveedor" style="width: 22%"
                                      sortBy="#{ordenServicio.idProveedor.razonSocial}" > 
                                <f:facet name="header">  
                                    <h:outputText value="Proveedor" />  
                                </f:facet>
                                <h:outputText value="#{ordenServicio.idProveedor.razonSocial}" /> 
                            </p:column>

                            <p:column id="idColumnaCategoriaArticulo" style="width: 13%" 
                                      sortBy="#{ordenServicio.servicio}" > 
                                <f:facet name="header">  
                                    <h:outputText value="Servicio" />  
                                </f:facet>
                                <h:outputText value="#{ordenServicio.servicio}" /> 
                            </p:column>

                            <p:column id="idColumnaFechaEmision" style="width: 10%" 
                                      sortBy="#{ordenServicio.fechaEmision}" > 
                                <f:facet name="header">  
                                    <h:outputText value="Fec. Emision" />  
                                </f:facet>
                                <h:outputText value="#{ordenServicio.fechaEmision}" > 
                                    <f:convertDateTime pattern="dd/MM/yyyy" />
                                </h:outputText>
                            </p:column>

                            <p:column id="idColumnaEstado" style="width: 10%" 
                                      sortBy="#{ordenServicio.estadoOrden}" > 
                                <f:facet name="header">  
                                    <h:outputText value="Estado" />  
                                </f:facet>
                                <h:outputText value="#{ordenServicio.estadoOrden eq 'C'?'CERRADO':(ordenServicio.estadoOrden eq 'A'?'ABIERTO':(ordenServicio.estadoOrden eq 'N'?'ANULADO':'BORRADOR'))}" /> 
                            </p:column>

                            <p:column id="idColumnaVence" style="width: 10%" 
                                      sortBy="#{ordenServicio.plazoEntrega}" >
                                <f:facet name="header">  
                                    <h:outputText value="Fec. Entrega" />  
                                </f:facet>
                                <h:outputText value="#{ordenServicio.plazoEntrega}" > 
                                    <f:convertDateTime pattern="dd/MM/yyyy" />
                                </h:outputText> 
                            </p:column>

                            <p:column id="idAccionesCuentaBancaria" headerText="Acciones" exportable="false" style="width: 10%"  >
                                <h:commandLink action="#{MBOrdenServicio.ver()}" target="_blank">
                                    <p:commandButton icon="ui-icon-search" title="Ver" ajax="false" />
                                    <f:setPropertyActionListener value="#{ordenServicio}" target="#{BKOrdenServicio.ordenServicioFormulario}" /> 
                                </h:commandLink>
                                <p:commandButton icon="ui-icon-pencil" title="Editar" ajax="false"  action="#{MBOrdenServicio.editar()}">
                                    <f:setPropertyActionListener value="#{ordenServicio}" target="#{BKOrdenServicio.ordenServicioFormulario}" />  
                                </p:commandButton>  
                                <p:commandButton id="btnEliminarBanco" title="Eliminar" icon="ui-icon-trash"  oncomplete="confirmarEliminar.show()"
                                                 rendered="#{ordenServicio.estadoOrden eq 'B'}">
                                    <f:setPropertyActionListener value="#{ordenServicio}" target="#{BKOrdenServicio.ordenCompraServicioSeleccionado}" />
                                </p:commandButton>
                                <p:commandButton id="btnSeguimientoOS" title="Seguimiento" icon="ui-icon-folder-open"  ajax="false" action="#{MBOrdenServicioSeg.mostrarSeguimiento()}"
                                                 rendered="#{ordenCompra.estadoOrden ne 'B'}">
                                    <f:setPropertyActionListener value="#{ordenServicio}" target="#{BKOrdenServicioSeg.ordenServicioSeg}" /> 
                                </p:commandButton>
                            </p:column>

                        </p:dataTable>	
                    </p:panel>

                    <p:confirmDialog id="dlgEliminarOrdenServicio" message="#{message['dialog.confirmacion.mensaje']}" 
                                     header="#{message['dialog.confirmacion.header']}" severity="alert" widgetVar="confirmarEliminar">
                        <p:commandButton id="btnConfEliOrdenServicio" update="dataTablaOrdenesServicio" value="Si"  oncomplete="confirmarEliminar.hide()"  
                                         actionListener="#{MBOrdenServicio.eliminar}" />  
                        <p:commandButton id="btnCancEliOrdenServicio" value="No" onclick="confirmarEliminar.hide()" type="button" />   
                    </p:confirmDialog>



                </h:form>
            </f:view>
        </ui:define>
    </ui:composition>
</html>   